<template>
    <div id="container">
        <div id="steps-line">
            <div class="mission-list"
                 v-for="(item, index) in cdata"
                 :key="index"
                 @touchmove.stop="stepsTouchMove">
                <div class="mission-name">{{ item.name }}</div>
                <el-steps :active="item.active" align-center>
                    <el-step v-for="(itemS, indexS) in item.steps"
                             :key="indexS"
                             :title="itemS.name"
                             :status="itemS.status"
                             :icon="itemS.status=='process'?'el-icon-loading':''"
                             :class="indexS==item.active?'activated':''"></el-step>
                </el-steps>
            </div>
        </div>
        <div id="progress-bar-box">
            <div v-for="(item, index) in totalProgress" :key="index">
                <dv-decoration-9 :style="progressStyle">
                    <dv-digital-flop :config="item.config"/>
                </dv-decoration-9>
            </div>
        </div>
    </div>
</template>

<script>
// const cubic = value => Math.pow(value, 3);
// const easeInOutCubic = value => value < 0.5
//         ? cubic(value * 2) / 2
//         : 1 - cubic((1 - value) * 2) / 2;
export default {
    data() {
        return {
            totalProgress: [],
            progressW: '',
            progressStyle: {
                width: '100%',//'calc(5rem / 3 * 0.9)',
                height: '100%',
            }
        };
    },
    components: {},
    props: {
        cdata: {
            type: Array,
            default: () => ([
                {
                    name: '',
                    active: 0,
                    steps: []
                }
            ])
        },
    },
    mounted() {
        // this.scrollAnim();
    },
    methods: {
        scrollAnim(el, needScrollLeft) {
            const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
            const frameFunc = () => {
                el.scrollLeft = needScrollLeft;
            };
            rAF(frameFunc);
        },
        stepsTouchMove() {
        },
    },
    watch: {
        cdata: {
            handler(newData) {
                newData.forEach((currentValue, index) => {
                    this.totalProgress[index] = {};
                    // this.totalProgress[index].num = parseFloat(((currentValue.active / currentValue.steps.length) * 100).toFixed(2));
                    this.totalProgress[index].config = {
                        number: [(currentValue.finishedNum / currentValue.steps.length) * 100],
                        toFixed: 2,
                        content: '{nt}%',
                        style: {
                            fontSize: 20,
                            fontWeight: 'bold',
                            gradientColor: ['#79e8f8', '#1ee3ff'],

                            // fontSize: 25,
                            // fontWeight: 'bolder',
                            // gradientColor: ['#79e8f8', '#1ee3ff'],
                        },
                    };
                    // this.$nextTick(() => {
                    //     let scrollBarL = this.$refs.scrollbar;
                    //     if (scrollBarL) {
                    //         let currentSrcollItem = scrollBarL[index],
                    //                 scrollItemW = currentSrcollItem.$children[0].$children[0].$el.clientWidth,
                    //                 currentItemLeft = scrollItemW * currentValue.active,
                    //                 needScrollLeft = currentItemLeft - currentSrcollItem.$el.clientWidth / 2;
                    //         if (needScrollLeft < 0) {
                    //             needScrollLeft = 0;
                    //         }
                    //         setTimeout(() => {
                    //             currentSrcollItem.wrap.scrollLeft = needScrollLeft;
                    //             // this.scrollAnim(currentSrcollItem.wrap, needScrollLeft);
                    //         }, 300)
                    //     }
                    // })
                });
                // this.totalProgress = parseFloat(((newData.active / newData.steps.length) * 100).toFixed(2));
            },
            immediate: true,
            deep: true
        },
    },
}
</script>

<style lang="scss" scoped>
#container {
    display: grid;
    grid-template-columns: auto 2rem;
    grid-template-rows: repeat(1, 100%);

    > div {
        height: 100%;


        .mission-name {
            width: 100%;
            line-height: 0.5rem;
            font-size: 0.225rem;
            //text-align: center;
            padding: 0 0.2rem;
        }

    }

    #steps-line {
        display: grid;
        grid-template-columns: repeat(1, 100%);
        grid-template-rows: repeat(3, 33.3%);

        .mission-list {
            display: grid;
            grid-template-columns: repeat(1, 100%);
            grid-template-rows: 1fr 2.5fr;

            ::v-deep .el-scrollbar {

                .el-scrollbar__wrap {
                    &::-webkit-scrollbar {
                        display: none;
                    }

                    .el-scrollbar__view {
                        position: relative;
                        top: 50%;
                        -webkit-transform: translateY(-50%);
                        -moz-transform: translateY(-50%);
                        -ms-transform: translateY(-50%);
                        -o-transform: translateY(-50%);
                        transform: translateY(-50%);
                    }
                }
            }

            ::v-deep .el-steps.el-steps--horizontal {
                //display: block;
                overflow-x: auto;
                overflow-y: visible;

                &::-webkit-scrollbar {
                    display: none;
                }

                .el-step.is-horizontal {
                    max-width: 1.5rem !important;
                    width: 1.5rem;
                    flex: none;
                    flex-basis: auto !important;
                    padding: calc(0.3rem * 1.6 - 0.3rem) 0 0 0;

                    &:not(.activated) {
                        .el-step__head:not(.is-wait) {
                            .el-step__line {
                                background-image: linear-gradient(to right, #2fdad3, #95f266);
                            }
                        }
                    }

                    &.activated {
                        .el-step__head.is-process {
                            .el-step__icon {
                                //background: #FEAB38;
                                -webkit-transform: scale(1.5);
                                -moz-transform: scale(1.5);
                                -ms-transform: scale(1.5);
                                -o-transform: scale(1.5);
                                transform: scale(1.5);
                                border: 0.02rem solid #EEDB0A;
                                animation: doing .5s linear 0s infinite alternate;
                                -webkit-animation: doing .5s linear 0s infinite alternate;

                                .el-step__icon-inner {
                                    font-size: 0.23rem;
                                    font-weight: bolder;
                                }
                            }

                            & + .el-step__main {
                                .el-step__title {
                                    font-size: 0.25rem;
                                    font-weight: bolder;
                                }
                            }
                        }

                    }

                    .el-step__main {
                        .el-step__title {
                            width: 80%;
                            line-height: 0.5rem;
                            margin: 0 auto;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            color: #07a3b3;
                            font-size: 0.23rem;
                            font-weight: normal;
                        }
                    }

                    .el-step__head {
                        //overflow: visible;
                        .el-step__line {
                            height: 0.03rem;
                            top: 50%;
                            -webkit-transform: translateY(-50%);
                            -moz-transform: translateY(-50%);
                            -ms-transform: translateY(-50%);
                            -o-transform: translateY(-50%);
                            transform: translateY(-50%);
                            //background-image: linear-gradient(to right, #2fdad3, #95f266);
                            .el-step__line-inner {
                                border: none;
                            }
                        }

                        .el-step__icon {
                            width: 0.3rem;
                            height: 0.3rem;
                            border-radius: 50%;
                            border-color: #fff;
                            color: #fff;
                            background: #0ce1f7;

                            .el-step__icon-inner {
                                font-size: 0.2rem;
                            }
                        }

                        &.is-success {
                            .el-step__line {
                                background-image: linear-gradient(to right, #2fdad3, #95f266);
                            }
                        }

                        &.is-process {
                            .el-step__icon {
                                border-color: transparent;
                                background: #FEAB38; //EEDB0A
                            }
                        }

                        &.is-error {
                            .el-step__icon {
                                border-color: transparent;
                                background: #f00; //EEDB0A
                            }
                        }

                        &.is-wait {
                            .el-step__icon {
                                border-color: transparent;
                                color: #3F6797;
                                background: #3F6797;
                            }
                        }

                        &.is-process + .el-step__main {
                            .el-step__title {
                                color: #fdbf41;
                            }
                        }

                        &.is-error + .el-step__main {
                            .el-step__title {
                                color: #f00;
                            }
                        }

                        &.is-wait + .el-step__main {
                            .el-step__title {
                                color: #3F6797;
                            }
                        }
                    }
                }
            }
        }
    }

    #progress-bar-box {
        display: grid;
        grid-template-columns: repeat(1, 100%);
        grid-template-rows: repeat(3, 33.3%);

        > div {
            width: calc(5rem / 3);
            height: calc(5rem / 3);
            padding: 1%;
            margin: 0 auto;
            border: 2px dotted #63a1c7;
            border-radius: 50%;
        }

        ::v-deep .el-progress.el-progress--circle {
            width: 100%;
            height: 100%;
            border: 2px dotted #63a1c7;
            border-radius: 50%;
        }

        .dv-decoration-9 {
            margin: 0 auto;
            font-size: 0.25rem;
            font-weight: bolder;
            color: rgba(126, 198, 153, 0.8);
        }
    }
}

@keyframes doing {
    from {
        box-shadow: 0 0 0 0 #fff;
    }
    to {
        box-shadow: 0 0 0.3rem 0.06rem #EEDB0A;
    }
}
</style>